<template>
  <div class="top">
    <!-- 数据统计 -->
    <div class="left">
      <!-- 数据展示栏 -->
      <div class="all">
        <!-- 工单统计 -->
        <div class="le">
          <div class="title">
            <h3>工单统计</h3>
            <span>{{ start }} ~ {{ end }}</span>
          </div>
          <div class="con">
            <div class="item">
              <div class="num">{{ totalWorkerCounts }}</div>
              <div class="text">工单总数（个）</div>
            </div>
            <div class="item">
              <div class="num">{{ completedTotal }}</div>
              <div class="text">完成工单（个）</div>
            </div>
            <div class="item">
              <div class="num">{{ progressTotal }}</div>
              <div class="text">进行工单（个）</div>
            </div>
            <div class="item">
              <div class="num">{{ cancelTotal }}</div>
              <div class="text">取消工单（个）</div>
            </div>
          </div>
        </div>
        <!-- 销售统计 -->
        <div class="ri">
          <div class="title">
            <h3>销售统计</h3>
            <span>{{ start }} ~ {{ end }}</span>
          </div>
          <div class="con">
            <div class="item">
              <div class="num">{{ orderCount }}</div>
              <div class="text">订单量（个）</div>
            </div>
            <div class="item">
              <div class="num">{{ (orderAmount/1000000).toFixed(2) }}</div>
              <div class="text">销售额（万元）</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <EchartShow />
    </div>
    <!-- 排行榜 -->
    <div class="right">
      <div class="title">
        <h3>商品热榜</h3>
        <span>{{ start }} ~ {{ end }}</span>
      </div>
      <ul>
        <li v-for="(it,i) in topList" :key="i">
          <div class="bgcimg" :style="styles[`${i <= 3 ? i : 3}`]">{{ i+1 }}</div>
          <div class="production">{{ it.skuName }}</div>
          <div class="sellnum">{{ it.count }}单</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex'
import moment from 'moment'
import EchartShow from './EchartShow.vue'
import bgc1 from '@/assets/others/one.png'
import bgc2 from '@/assets/others/two.png'
import bgc3 from '@/assets/others/three.png'
import bgc4 from '@/assets/others/oths.png'
export default {
  name: 'HomeHead',
  components: {
    EchartShow
  },
  data() {
    return {
      styles: [
        { background: `url(${bgc1}) no-repeat` },
        { background: `url(${bgc2}) no-repeat` },
        { background: `url(${bgc3}) no-repeat` },
        { background: `url(${bgc4}) no-repeat 60% 0` }
      ],
      params: {
        start: `${moment().format('YYYY-MM') + '-01'} 00:00:00`,
        end: `${moment().format('YYYY-MM-DD')} 23:59:59`
      },
      start: moment().format('YYYY-MM') + '-01',
      end: moment().format('YYYY-MM-DD')
    }
  },
  computed: {
    ...mapState('home', ['orderAmount', 'orderCount', 'topList']),
    ...mapGetters('home', ['totalWorkerCounts', 'completedTotal', 'progressTotal', 'cancelTotal'])
  },
  created() {
    // 触发仓库更新
    this.getTasksInfo(this.params)
    this.getOrdersInfo(this.params)
    this.getTopList({ size: 10, start: moment().format('YYYY-MM') + '-01', end: moment().format('YYYY-MM-DD') })
  },
  methods: {
    ...mapActions('home', ['getTasksInfo', 'getOrdersInfo', 'getTopList'])
  }
}
</script>

<style lang="scss" scoped>
  .top {
    width: 100%;
    height: 538px;
    display: flex;
    .right {
      width: 413px;
      height: 100%;
      background-color: #fff;
      margin: 0;
      list-style: none;
      padding: 20px;
      overflow: hidden;
      border-radius: 20px;
      margin-left: 10px;
      ul {
        height: 460px;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        padding: 0;
        li {
          width: 100%;
          height: 23px;
          display: flex;
          justify-content: space-between;
          padding: 0 30px;
          align-items: center;
          .bgcimg {
            width: 21px;
            height: 20px;
            text-align: center;
            font-size: 12px;
          }
        }
      }
    }
    .left {
      width: 1285px;
      .all {
        width: 100%;
        height: 166px;
        display: flex;
        justify-content: space-between;
        .con {
          height: 107px;
          width: 100%;
          display: flex;
          .item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .num {
              height: 50px;
              font-size: 36px;
              font-weight: 600;
              margin-top: -40px;
            }
            .text {
              height: 17px;
              margin-top: 3px;
              font-size: 12px;
              line-height: 17px;
            }
          }
        }
        .le {
          width: 683px;
          height: 100%;
          padding: 20px;
          background: #e9f3ff;
          border-radius: 20px;
          background-image: url('…jFo4e5XU3F6Uv4PzsqEn/B1VshFHJ0SGMAAAAAElFTkSuQmCC'),
            url('https://likede2-admin.itheima.net/img/task.66b715b7.png');
          background-repeat: no-repeat, no-repeat;
          background-position: 0 0, calc(100% - 12px) 100%;
          .con {
            .item {
              .num {
                color: #072074;
                text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
              }
              .text {
                color: #91a7dc;
              }
            }
          }
        }
        .ri {
          width: 575px;
          height: 100%;
          padding: 20px;
          border-radius: 20px;
          background: #fbefe8
            url('https://likede2-admin.itheima.net/img/sale.606b0d8c.png')
            no-repeat calc(100% - 12px) 100%;
          .con {
            .item {
              .num {
                color: #ff5757;
                text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
              }
              .text {
                color: #de9690;
              }
            }
          }
        }
      }
    }
  }
</style>
